import React from 'react'
import {
  VerticalAlignTopOutlined,

} from '@ant-design/icons';
function List() {
    const list=[
        {
            img:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            name:'交通互补塑造中国——海湾交涉',
            title:'查看更多',
            price:'131234'
        },
        {
            img:'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
            name:'交通互补塑造中国——海湾交涉',
            title:'查看更多',
            price:'131234'
        },
        {
            img:'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
            name:'交通互补塑造中国——海湾交涉',
            title:'查看更多',
            price:'131234',
        },
        {
            img:'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
            name:'交通互补塑造中国——海湾交涉',
            title:'查看更多',
            price:'131234'
        },
        {
            img:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            name:'交通互补塑造中国——海湾交涉',
            title:'查看更多',
            price:'131234'
        },
    ]
  return (
    <div>
      {
        list.map((item,index)=>{
            return<div key={index} className='box'>
                <div>
                    <img src={item.img} alt="" />
                </div>
                <div>
                    <p>{item.name}</p>
                    <p>{item.title}</p>
                </div>
                <div>
                    <p>{item.price}</p>
                </div>
            </div>
        })
      }
      <p><VerticalAlignTopOutlined className='p1' /></p>
      <p><span className='p2'>1</span></p>
      <p ><span className='p3'>2</span></p>
      <p><span className='p4'>3</span></p>
      
    </div>
  )
}

export default List
